<template>
  <div id="editorContainer" >

  
  <a-layout >
    <a-layout-sider width="300px" :style="{...siderStyle, padding: '20px'}">
      <a-tabs v-model:activeKey="activeKeyLeft">
        <a-tab-pane key="1">
          <template #tab>
            <span>
              <FieldStringOutlined />
              文本
            </span>
          </template>
          <ComponentsList @addItem="addItem" ref="componentsListRef"/>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>
              <FileImageOutlined />
              图片
            </span>
          </template>
          Tab 2
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <span>
              <BuildOutlined />
              形状
            </span>
          </template>
          Tab 2
        </a-tab-pane>
      </a-tabs>
    </a-layout-sider>

    <a-layout >
      <a-layout-content :style="contentStyle">
        <p>画布区域</p>
        
        <div id="canvas-area" ref="canvas-area" >
          <div style="position: relative;overflow: hidden;height: 560px;width: 375px;">
            <edit-wrapper v-for="item in components"
            :key="item.id" :id="item.id"
            :props="item.props"
            @set-active="setActive"
            @updatePosition="updatePosition">
              <component  
                :is="item.name"
                v-bind="item.props"
                :uId="`w_` + item.id">
              </component>
              <!-- <z-text  v-bind="item.props" :uId="`z_` + item.id"></z-text> -->
            </edit-wrapper>

            
          </div>

          <zTextEditing uId="canvas-area"  @changeTextStyle="changeTextStyle"/>

        </div>
        
       
      </a-layout-content>
    </a-layout>

    <a-layout-sider width="300px" :style="{...siderStyle, padding: '13px 0'}">
      <a-tabs v-model:activeKey="activeKeyRight" type="card">
        <a-tab-pane key="1" tab="属性设置">
          <props-table v-if="getCurrentElement?.props"
          :type="getCurrentElement.props"
          @change="handleChange">
          </props-table>
         <!-- {{ getCurrentElement?.props }} -->
        </a-tab-pane>
        <a-tab-pane key="2" tab="图层设置">
          <p>Content of Tab Pane 2</p>
          <p>Content of Tab Pane 2</p>
          <p>Content of Tab Pane 2</p>
        </a-tab-pane>
        <a-tab-pane key="3" tab="页面设置">
          <p>Content of Tab Pane 3</p>
          <p>Content of Tab Pane 3</p>
          <p>Content of Tab Pane 3</p>
        </a-tab-pane>
      </a-tabs>
    </a-layout-sider>
  </a-layout>
  
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { CSSProperties } from 'vue';
import { storeToRefs } from 'pinia';
import { FieldStringOutlined, FileImageOutlined, BuildOutlined } from '@ant-design/icons-vue';
import { PartialTextComponentProps } from '../../hooks/useComponentCommon'
import { pickBy, forEach } from 'lodash-es'
import  zTextEditing from '../../components/z-components/zTextEditing.vue'

// import useComponentCommon from '../../hooks/useComponentCommon'

import EditWrapper from '../../components/common/EditWrapper.vue';
import ComponentsList from '../../components/common/ComponentsList.vue'

import PropsTable from '../../components/common/PropsTable.vue'

// import zText from '../../components/zText.vue'

// 首先需要引入一下我们刚刚创建的store
import useEditorStore from '../../stores/module/editor'
// 因为是个方法，所以我们得调用一下
const { components, getCurrentElement } = storeToRefs(useEditorStore())

// console.log(components)

const activeKeyLeft = ref('1');
const activeKeyRight = ref('1')

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 'calc(100vh - 90px)',
  padding: '24px'
};

const siderStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: '100%',
  color: '#fff',
  backgroundColor: '#fff',
};

const addItem = (row: PartialTextComponentProps) => {
  useEditorStore().addComponents(row)
}

const setActive = (id: string) => {
  // console.log('setActive', id)
  useEditorStore().setActive(id)
}

const handleChange = ({ key, value }) =>{
  useEditorStore().updateComponents({key, value})
}

const updatePosition = (data: {id: string}) => {
  const { id } = data
  const updatedData = pickBy<number>(data, (v, key) => key !== 'id')
  forEach(updatedData, (v, key) => {
    useEditorStore().updateComponents({key, value: v + 'px', id: id})
  })
  // useEditorStore().updateComponents({key: 'left', value: left + 'px', id: id})
  // useEditorStore().updateComponents({key: 'top', value: top + 'px', id: id})
}

// 
const changeTextStyle = (data: string) => {
  // console.log(11111)
  console.log(document.getElementById(`z_${getCurrentElement.value?.id}`)?.innerHTML)
}
</script>

<style lang="scss">
#canvas-area {
  background-color: #fff;
  width: 375px;
  min-height: 560px;
  margin: 0 auto;
  position: relative;
  
}
</style>